/**
* 功能描述：分页条组件
* @author jin xiaohang
* @date 2022/9/30 9:50
* @version 1.0
*/

@import "src/style/mixins/index";

//定义布局
@mixin pagination-layout{
  box-sizing: border-box;
  margin: 0;
  padding: 0;

  //翻页键布局
  .#{$namespace}-pagination-prev,.#{$namespace}-pagination-next{
    display: inline-block;
    min-width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    vertical-align: middle;
    margin-right: 5px;

    //按钮占位符布局
    .#{$namespace}-pagination-link{
      display: block;
      height: 100%;
      text-align: center;
    }
  }

  //分页项布局
  .#{$namespace}-pagination-item{
    display: inline-block;
    min-width: 32px;
    height: 32px;
    margin-right: 5px;
    line-height: 30px;
    text-align: center;
    vertical-align: middle;
    list-style: none;
  }

  //选择器布局
  .#{$namespace}-pagination-options{
    display: inline-block;
    margin-left: 2px;
    vertical-align: middle;

    //选择器容器布局
    .#{$namespace}-pagination-select-container{
      box-sizing: border-box;
      margin: 0;
      padding-right: 8px;
      line-height: 1.5715;
      position: relative;
      display: inline-block;

      //选择器外层布局
      .#{$namespace}-pagination-select{
        display: flex;
        height: 24px;
        position: relative;
        width: 100%;
        padding: 0 7px;

        //选择项布局
        .#{$namespace}-pagination-select-item{
          line-height: 22px;
          padding-right: 21px
        }
      }

      //选择图标布局
      .#{$namespace}-pagination-select-arrow{
        position: absolute;
        top: 53%;
        right: 11px;
        width: 12px;
        height: 12px;
        margin-top: -6px;
        line-height: 1;
        text-align: center;
      }
    }

    //快速跳转布局
    .#{$namespace}-pagination-options-quick-jumper{
      height: 24px;
      line-height: 24px;
      display: inline-block;
      vertical-align: top;

      //快速跳转输入框
      .#{$namespace}-pagination-options-quick-jumper-input{
        position: relative;
        display: inline-block;
        font-size: 14px;
        line-height: 1.5715;
        margin: 0 8px;
        padding: 0 7px;
        width: 44px;
      }
    }
  }
}


//样式
@include b(pagination){
  color: #000000d9;
  font-size: 14px;
  list-style: none;

  //翻页键样式
  .#{$namespace}-pagination-prev,.#{$namespace}-pagination-next{
    color: #000000d9;
    list-style: none;
    border-radius: 2px;
    cursor: pointer;
    transition: all .3s;

    //按钮占位符布局
    .#{$namespace}-pagination-link{
      font-size: 12px;
      background-color: #fff;
      border-radius: 2px;
      outline: none;
      transition: all .3s;

    }
  }

  //分页项样式
  .#{$namespace}-pagination-item{
    background-color: #fff;
    border-radius: 2px;
    outline: 0;
    cursor: pointer;
    user-select: none;
    a{
      &:hover{
        cursor: pointer;
        color: #409EFF;
      }
    }
  }

  //选中样式
  .#{$namespace}-pagination-selected-item{
    border-style: solid;
    border-width: 1px;
    border-color: #409EFF;
    a{
      color: #409EFF;
      &:hover{
        cursor: pointer;
        color: #409EFF;
      }
    }
  }

  //禁用样式
  .#{$namespace}-pagination-disabled-item{
    border-style: solid;
    border-width: 1px;
    border-color: #C0C4CC;
    background-color: #C0C4CC;
    &:hover{
      cursor: not-allowed;
    }
    a{
      color: #FFFFFF;
      &:hover{
        cursor: not-allowed;
        color: #FFFFFF;
      }
    }
  }

    //选择器容器布局
    .#{$namespace}-pagination-select-container{
      color: #000000d9;
      font-size: 14px;
      list-style: none;
      cursor: pointer;

      //选择器外层布局
      .#{$namespace}-pagination-select{
        background-color: #fff;
        border: 1px solid #d9d9d9;
        border-radius: 2px;
        transition: all .3s cubic-bezier(.645,.045,.355,1);
      }

      //选择图标布局
      .#{$namespace}-pagination-select-arrow{
        color: #00000040;
        font-size: 12px;
      }
    }

      //快速跳转输入框
      .#{$namespace}-pagination-options-quick-jumper-input{
        color: #000000d9;
        font-size: 14px;
        background-color: #fff;
        border: 1px solid #d9d9d9;
        border-radius: 2px;
        transition: all .3s;
      }

  //引用布局
  @include pagination-layout;

}
